import React from 'react'
import CityList from '../../../public/cities.json'
import { IndexBar, List } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
function City() {
   const [searchParams]=useSearchParams()
   const navigate=useNavigate()
    const type = searchParams.get('type')
    const getCity=(value)=>{
      localStorage.setItem(type,value)
       
       navigate('/')
    }
  return (
    <div style={{width:'100vw',height:'100vh'}}>
       <IndexBar>
        {CityList.cityList.map((group,i) => {
        
          return (
            <IndexBar.Panel
              index={group.title}
              title={group.title}
              key={i}
            >
              <List>
                {group.citys.map((item, index) => (
                  <List.Item key={index} onClick={()=>getCity(item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
  )
}

export default City
